import React from 'react';
import { observer } from 'mobx-react';
import {  Table } from 'antd';
import {LogListStore} from "../../stores/list/LogListStore";
import { WeaDialog,WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export interface LogListProps {
    cubeLogList: LogListStore;
}

@observer
export default class DetailFieldLog extends React.Component<LogListProps, any> {

    render() {
        const { cubeLogList } = this.props;
        const columns = [
            { title: 'ID', dataIndex: 'id', key: 'id', width: '10%'},
            { title: getLabel(15503, '操作类型'), dataIndex: 'operateType', key: 'operateType', width: '20%'},
            {
                title: getLabel(382058, '操作描述'),
                dataIndex: 'operateDesc',
                key: 'operateDesc',
                width: '70%',
                render:text=>{
                    return <div dangerouslySetInnerHTML={{ __html: text }}  />;
                }
            }
        ];

        return (
            <Table
                columns={columns}
                className="cube-log-list-table"
                dataSource={cubeLogList.detailLog_data}
                pagination={false}
            />
        );
    }
}


@observer
export class DetailFieldLogDialog extends React.Component<LogListProps, any> {
    render() {
        const { cubeLogList } = this.props;
        const {iconInfo}=cubeLogList;
        return (
            <WeaDialog
                onCancel={()=>cubeLogList.detailLog_visible=false}
                title={getLabel(82274,"字段日志")}
                visible={cubeLogList.detailLog_visible}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon ||'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                style={{ width: 800, height: 560 }}
                hasScroll
            >
                {cubeLogList.detailLog_visible && <DetailFieldLog cubeLogList={cubeLogList} />}
            </WeaDialog>
        )
    }
}